<template>
    <div>
         <el-tabs v-model="activeName">
            <el-tab-pane label="开关设置" name="switchSet"></el-tab-pane>
            <el-tab-pane label="模板设置" name="templSet"></el-tab-pane>
        </el-tabs>
        <el-card v-show="activeName == 'switchSet'">
            <el-row slot="header" type="flex" justify="space-between" align="center">
                <el-col :span="6">
                    <h2>{{$t('switchSettings.applicationSwitch')}}</h2>
                </el-col>
                <el-col :span="6" style="text-align:right">
                    <el-button type="danger" @click="handleClick('MDEL')">{{$t('switchSettings.delete')}}</el-button>
                    <el-button type="primary" @click="handleClick('ADD')">{{$t('switchSettings.add')}}</el-button>
                </el-col>
            </el-row>
            <edu-table
                :order="false"
                :data="tableData"
                style="width: 100%"
                ref="switchTable"
                :total="params.total_"
                :pageSize="params.pageSize_"
                @page-change="onCurrentPageChange"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" label-suffix="：">
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item :label="$t('switchSettings.semester')">
                                        <span>{{ props.row.calendarName }}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item :label="$t('switchSettings.startTime')">
                                        <span>{{ props.row.startTime }}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item :label="$t('switchSettings.endTime')">
                                        <span>{{ props.row.endTime }}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item :label="$t('switchSettings.openCollege')">
                                        <span>{{ props.row.colleges }}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('switchSettings.semester')" prop="calendarName"></el-table-column>
                <el-table-column
                    :label="$t('switchSettings.schoolOfAdministration')"
                    prop="colleges"
                    show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column :label="$t('switchSettings.startTime')" prop="startTime"></el-table-column>
                <el-table-column  :label="$t('switchSettings.endTime')" prop="endTime"></el-table-column>
                <el-table-column :label="$t('switchSettings.operate')">
                    <template slot-scope="scope">
                        <el-button type="text" @click.stop="handleClick('EDIT', scope.row)">
                           {{$t('switchSettings.edit')}}
                        </el-button>
                        <el-button type="text" @click.stop="handleClick('DEL', scope.row)">
                             {{$t('switchSettings.delete')}}
                        </el-button>
                    </template>
                </el-table-column>
            </edu-table>
        </el-card>
        <div v-if="activeName == 'templSet'">
            <course-schedule-templ />
        </div>
        <el-dialog
            :title="dialog.mode == 'ADD' ? '新增' : '编辑'"
            :visible.sync="dialog.visiable"
            :close-on-click-modal="false"
            @close="dialogClose"
            @open="dialogOpen"
            width="80%"
        >
            <el-form
                label-suffix="："
                :model="dialog"
                label-position="right"
                ref="dialog"
                :inline="true"
                label-width="100px"
            >
                <el-form-item
                    :label="$t('label.schoolTerm')"
                    props="calendarId"
                    :rules="[{ required: true, message: this.$t('switchSettings.pleaseSelectyearAndSemester'), trigger: 'change' }]"
                >
                    <CalendarSelect class="calendar" v-model="dialog.calendarId"></CalendarSelect>
                </el-form-item>
                <el-form-item
                   :label="$t('switchSettings.startTime')"
                    prop="startTime"
                    :rules="[{ required: true, message: this.$t('switchSettings.pleaseSelectStartTime') , trigger: 'change' }]"
                >
                    <el-date-picker
                        v-model="dialog.startTime"
                        type="date"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                          :placeholder="$t('switchSettings.pleaseDateTime')"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item
                   :label="$t('switchSettings.endTime')"
                    prop="endTime"
                    :rules="[{ required: true, message:  this.$t('switchSettings.pleaseSelectEndTime'), trigger: 'change' }]"
                >
                    <el-date-picker
                        v-model="dialog.endTime"
                        type="date"
                        :picker-options="pickerOptions"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        :placeholder="$t('switchSettings.pleaseDateTime')"
                    ></el-date-picker>
                </el-form-item>
            </el-form>
            <el-transfer
                filterable
                :filter-method="filterMethod"
                 :filter-placeholder="$t('switchSettings.pleaseSearch')"
                v-model="dialog.collegeList"
                :data="options.faculty"
            ></el-transfer>
            <span slot="footer">
                <el-button @click="dialog.visiable = false">{{$t('switchSettings.cancel')}}</el-button>
                <el-button type="primary" @click="onSubmit">{{$t('switchSettings.determine')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import {
    getSSList,
    addList,
    deleteList,
    editList
} from 'common/src/api/internationalExchanges/switchSetting'
export default {
    data() {
        return {
            params: {
                total_: 0,
                pageNum_: 1,
                pageSize_: 20,
                condition: {}
            },
            tableData: [],
            multipleSelection: [],
            dialog: {
                visiable: false,
                mode: '',
                calendarId: '',
                startTime: '',
                endTime: '',
                collegeList: []
            },
            options: {
                faculty: []
            },
            pickerOptions: {
                disabledDate: time => {
                    return time.getTime() < new Date(_.cloneDeep(this.dialog.startTime)).getTime()
                }
            },
            activeName: 'switchSet'
        }
    },
    components: {
        'courseScheduleTempl': resolve => require(['./courseScheduleTemplset.vue'], resolve),
    },
    mounted() {
        this.queryList()
        this.initOptions()
    },
    methods: {
        async queryList() {
            
            let { code, data } = await getSSList(this.params)
            if (code !== 200) return
            this.params.total_ = data.total_
            this.params.pageSize_ = data.pageSize_
            data.list.forEach(d => {
                d.colleges = this.strStitch(d.collegeList, 'collegeCodeI18n')
            })
            this.tableData = data.list
        },
        /**
         * list 列表数据
         * key 拼接的列表字段
         * return str
         *
         */
        strStitch(list, key) {
            let str = ''
            let len = list.length
            list.forEach((item, index) => {
                if (index == len - 1) {
                    str += item[key]
                } else {
                    str += `${item[key]}、`
                }
            })
            return str
        },
        initOptions() {
            let params = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['X_YX']
            }
            queryDic(params)
                .then(res => {
                    if (res.code === 200) {
                        UTILS.fillSelect({ faculty: 'X_YX' }, res.data, this.options)
                    }
                })
                .catch(error => {
                    console.log(error)
                })
        },
        handleClick(mode, row) {
            switch (mode) {
                case 'ADD':
                    this.dialog.mode = mode
                    this.dialog.visiable = true
                    break
                case 'MDEL':
                    if (this.multipleSelection.length === 0) {
                        this.$message({
                            type: 'warning',
                            message: '请先勾选需要删除的列表记录'
                        })
                        return
                    }
                    this.$confirm('确认删除选中, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                        .then(() => {
                            deleteList({ ids: this.multipleSelection }).then(res => {
                                if (res.code == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    })
                                    this.queryList()
                                }
                            })
                        })
                        .catch(() => {
                            this.$refs['switchTable'] && this.$refs['switchTable'].clearSelection()
                        })
                    break
                case 'DEL':
                    this.$confirm('确认删除, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        deleteList({ ids: [row.id] }).then(res => {
                            if (res.code == 200) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                })
                                this.queryList()
                            }
                        })
                    })
                    break
                case 'EDIT':
                    this.dialog.visiable = !this.dialog.visiable
                    this.dialog.mode = mode
                    this.dialog.id = row.id
                    this.dialog.endTime = row.endTime
                    this.dialog.startTime = row.startTime
                    this.dialog.calendarId = row.calendarId
                    this.dialog.collegeList = row.collegeList.map(item => item.collegeCode)
                    break
            }
        },
        onSubmit() {
            this.$refs['dialog'].validate(valid => {
                if (valid) {
                    let params = _.cloneDeep(this.dialog)
                    delete params.visiable
                    delete params.mode
                    params.collegeList = this.dialog.collegeList.map(c => {
                        return {
                            collegeCode: c
                        }
                    })
                    if (this.dialog.mode == 'ADD') {
                        addList(params).then(res => {
                            if (res.code == 200) {
                                this.$message({
                                    type: 'success',
                                    message: '新增成功'
                                })
                                this.dialog.visiable = !this.dialog.visiable
                                this.$refs['dialog'].resetFields()
                                this.queryList()
                            }
                        })
                    } else {
                        editList(params).then(res => {
                            if (res.code == 200) {
                                this.$message({
                                    type: 'success',
                                    message: '编辑成功'
                                })
                                this.dialog.visiable = !this.dialog.visiable
                                this.$refs['dialog'].resetFields()
                                this.queryList()
                            }
                        })
                    }
                } else {
                    return false
                }
            })
        },

        onCurrentPageChange(pager) {
            this.params.pageSize_ = pager.pageSize
            this.params.pageNum_ = pager.pageNum
            this.queryList()
        },
        dialogClose() {
            for (let key in this.dialog) {
                if (key == 'collegeList') {
                    this.dialog[key] = []
                } else if (key !== 'visiable' && key !== 'calendarId') {
                    this.dialog[key] = ''
                }
            }
        },
        dialogOpen() {
            this.$refs['dialog'] && this.$refs['dialog'].clearValidate()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val.map(item => item.id)
        }
    }
}
</script>

<style>
</style>
